// 权限拦截  路由的导航守卫的文件, 后期自己来实现
// 1. 引入路由
import router from '@/router'
// 引入store
import store from '@/store'
// 导入nprogress包和样式文件
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 2. 添加前置导航守卫拦截页面
// to from 是路由信息对象 next是放行函数
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 开启nprogress
  nprogress.start()
  const token = store.getters.token
  //  判断是否有token
  if (token) {
    // 登录过还去访问登录页面,强制跳转到首页
    if (to.path === '/login') {
      next('/')
      // 被next拦截的页面 是不会经过后置导航守卫的， 需要手动关闭nprogress
      nprogress.done()
      // 登录后访问的是别的页面直接放行
    } else {
      // 获取个人信息，获取成功后再放行
      if (!store.getters.name) {
        const res = await store.dispatch('user/getUserInfo')
        console.log(res) // -挖坑 这个res中有一个roles 是一个对象 包含登录用户权限信息。后期我们会来处理权限
        // console.log(router) // router中有一个addRoutes方法, 为路由添加规则的,但是这个方法有缺陷, 使用这个方法添加的路由规则是不能通过 router.options.routes获取到的
        // 触发action
        // 模拟记录用户喜欢的主题色 需要发送请求
        // const likeTheme = '#f40'
        // 将用户喜欢的主题色同步到vuex和本地
        // store.dispatch('settings/changeSetting', { key: 'theme', value: likeTheme })
        const filterRoutes = await store.dispatch('permissions/getAsyncRoutes', res.roles.menus)
        // console.log(filterRoutes)

        // console.log(filterRoutes)
        // 将筛选完后的动态路由数组添加给路由规则
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])

        // addRoutes的已知问题
        // 出门->开门之后发现没路-> 自己手动铺一条路->自己走
        next(to.fullPath)
      }
      next()
      // console.log('页面放行')
    }
  } else {
    // 没有登录先判断是否去的是白名单页面
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 没有登录还访问的不是白名单页面， 强制重新登录
      next('/login')
      // 被next拦截的页面 是不会经过后置导航守卫的， 需要手动关闭nprogress
      nprogress.done()
    }
  }
})

// 后置导航守卫
router.afterEach((to, from) => {
  // console.log('后置导航守卫执行了')
  // 关闭nprogress
  nprogress.done()
})
